<template>
  <el-dialog v-model="visible" title="学生信息导出(可选填条件)" width="630px" draggable class="dialog" align-center>
    <el-form :inline="true" class="searchBox">
      <el-form-item label="姓名">
        <el-input v-model="paramsData.name" placeholder="输入学生姓名条件" clearable />
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="paramsData.studentId" placeholder="输入学生学号条件" clearable />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="paramsData.sex" placeholder="选择学生性别条件" clearable>
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input v-model="paramsData.identityId" placeholder="输入学生身份证条件" clearable />
      </el-form-item>
      <el-form-item label="年级">
        <el-select v-model="paramsData.grade" placeholder="选择学生年级条件" clearable>
          <el-option v-for="item in gradeList" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学院">
        <el-input v-model="paramsData.college" placeholder="输入学生学院条件" clearable />
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="paramsData.major" placeholder="输入学生专业条件" clearable />
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="paramsData.stuClass" placeholder="输入学生班级条件" clearable />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="paramsData.isDelete" placeholder="选择学生状态条件" clearable>
          <el-option label="未删除" value="0" />
          <el-option label="已删除" value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认导出</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUtils } from '../../../utils';
import { IFileStuParams } from '../../../type';
import { useAPI } from '../../../request/api';
import { onMounted } from 'vue';

const api = useAPI();
const utils = useUtils();
const visible = ref(false);
const gradeList = ref([] as { label:string; value:string }[]) ;
const paramsData = ref<IFileStuParams>({
    isDelete: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    name: '',
    sex: '',
    studentId: '',
    identityId: ''
})

onMounted(() => {
  gradeList.value = utils.getGradeList();
})

const open = () => {
  paramsData.value = {
    isDelete: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    name: '',
    sex: '',
    studentId: '',
    identityId: ''
  }
  visible.value = true;
}

const onCancel = () => {
  visible.value = false;
}
const onConfirm = () => {
  const exportUrl = utils.buildUrlParams(paramsData.value, api.student.fileExportUrl);
  visible.value = false;
  window.open(exportUrl, '_self');
}

defineExpose({ open })
</script>

<style lang="scss"  scoped>
.searchBox {

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }
</style>